<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Iframe Navigation Example</title>
    <style>
        .wrap { display: flex; }
        .aside-wrap { flex: 1; background-color: #f4f4f4; }
        .nab-list { list-style: none; padding: 0; }
        .nav-item { margin-bottom: 5px; }
        .nav-lk {
            display: block;
            padding: 10px;
            background-color: #ddd;
            color: black;
            text-decoration: none;
        }
        .nav-lk:hover { background-color: #ccc; }
        .frame-wrap { flex: 4; }
        iframe {
            width: 100%;
            height: 600px;
            border: none;
        }
    </style>
</head>
<body>
<div class="wrap">
    <aside class="aside-wrap">
        <ul class="nab-list">
            <li class="nav-item">
                <a href="https://www.taobao.com" target="navIframe" class="nav-lk">淘宝商城</a>
            </li>
            <li class="nav-item">
                <a href="https://www.tmall.com" target="navIframe" class="nav-lk">天猫商城</a>
            </li>
            <li class="nav-item">
                <a href="https://www.suning.com" target="navIframe" class="nav-lk">苏宁商城</a>
            </li>
        </ul>
    </aside>
    <section class="frame-wrap">
        <iframe src="https://www.taobao.com" name="navIframe1"></iframe>
        <iframe src="https://www.tmall.com" name="navIframe2"></iframe>
        <iframe src="https://www.suning.com" name="navIframe3"></iframe>
    </section>
</div>
</body>
</html>
